<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="ip"
                    label="ip"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="城市"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="注册时间"
                    width="180">
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
    export default {
        components:{
            'remote-js': {
                render(createElement) {
                    return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
                },
                props: {
                    src: { type: String, required: true },
                },
            }
        },

        data() {
            return {
                tableData: [],
                page:0
            }
        },

        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

        },
        created(){
          this.userList();
        },

    }
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>